<template>
  <div>
    <a-form
      style="width: 50%;"
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item
        name="remember"
        :wrapper-col="{ offset: 8, span: 16 }"
      >
        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
      </a-form-item>
      <a-form-item label="Instant delivery">
        <a-switch v-model:checked="formState.delivery" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button
          type="primary"
          html-type="submit"
        >Submit</a-button>
      </a-form-item>
    </a-form>
    <!-- horizontal  vertical inline-->
    <!-- layout="inline" -->
    <a-form
      ref="formRef"
      style="width: 300px;"
      :model="formState"
      @finish="handleFinish"
      @finishFailed="handleFinishFailed"
      :label-col="{ span: 11 }"
      :wrapper-col="{ span: 24 }"
      :rules="rules"
      hideRequiredMark
    >
      <a-form-item
        validate-status="error"
        help="11111"
        label="Username"
        name="user"
        has-feedback
        extra="222"
      >
        <a-input
          v-model:value="formState.user"
          placeholder="Username"
        >
        </a-input>
      </a-form-item>
      <a-form-item
        label="pass"
        name="pass"
      >
        <a-input
          v-model:value="formState.pass"
          type="password"
          placeholder="Password"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-form-item
          name="remember"
          no-style
        >
          <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
        </a-form-item>
        <a
          class="login-form-forgot"
          href=""
        >Forgot password</a>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
        >
          Log in
        </a-button>
        <a-button
          style="margin-left: 10px"
          @click="resetForm"
        >Reset</a-button>
      </a-form-item>

    </a-form>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      formState: {
        user: '',
        username: '',
        password: '',
        remember: true,
        delivery: false,

      },
      rules: {
        pass: [{
          required: true,
          trigger: 'change',
        }],
        checkPass: [{
          trigger: 'change',
        }],
        age: [{
          trigger: 'change',
        }],
      },
      // formRef: null,


    }
  },

  created() { },
  mounted() {

  },
  methods: {
    onFinish(e) {
      console.log(e, 3);

    },
    onFinishFailed(e) {
      console.log(e, 4);

    },
    handleFinish() {

    },
    handleFinishFailed() {

    },
    resetForm() {
      console.log(this.$refs.formRef, 1);
      this.$refs.formRef.resetFields();
    },
  },
}
</script>
<style scoped lang='scss'>
</style>
